<!-- 登录 -->
<template>
  <div class="login-wp">
    <div class="content">
      <div class="title">
        <img src="../../assets/image/logo.png"/>
        <span>霍格沃兹管理平台</span>
      </div>
      <div class="box">
        <el-form ref="form" :model="form" :rules="rules" class="this-form" @keyup.enter.native="submit()">
          <div class="t1">系统登录</div>
          <el-form-item class="form-item" prop="username">
            <div class="ipt-box" :class="{active: active.username}">
              <i class="el-icon-user"></i>
              <input v-model="form.username" type="text" placeholder="请输入用户名"
                @focus="showActive(true, 'username')"
                @blur="showActive(false, 'username')"/>
            </div>
          </el-form-item>
          <el-form-item class="form-item" prop="password">
            <div class="ipt-box" :class="{active: active.password}">
              <i class="el-icon-lock"></i>
              <input v-model="form.password" type="password" placeholder="请输入密码"
                @focus="showActive(true, 'password')"
                @blur="showActive(false, 'password')"/>
            </div>
          </el-form-item>
          <el-form-item class="form-item" prop="captcha">
            <div class="code-btn clearfix">
              <div class="ipt-box" :class="{active: active.captcha}">
                <i class="el-icon-key"></i>
                <input v-model="form.captcha" type="text" placeholder="请输入验证码"
                  @focus="showActive(true, 'captcha')"
                  @blur="showActive(false, 'captcha')"/>
              </div>
              <div class="img-box" @click="getCodeImage()">
                <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage"/>
                <img v-else style="margin-top: 2px;" src="../../assets/image/checkcode.png"/>
              </div>
            </div>
              
          </el-form-item>
        </el-form>
        <el-button class="submit-btn" type="primary" @click="submit()">登录系统</el-button>
      </div>
    </div>
  </div>
</template>
<script>

import {sys} from "@/config/api.js";
import {addLayoutRoutes} from "@/router/routerEvent.js";
import {storage, token} from '@/utils/tools.js';


export default {
  name: 'login',
  data () {
    return {
      active: {
        username: '',
        password: '',
        captcha: ''
      },

      form: {
        username: 'cs003',
        password: 'cs003@123',
        captcha: '',
        checkKey: '', // 验证码对应的时间戳
      },

      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        captcha: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },

      // 验证码
      randCodeImage: null,
      // 是否以获取验证码
      requestCodeSuccess: false,

    }
  },
  mounted () {
    this.getCodeImage();
  },
  methods: {
    // 获取验证码
    getCodeImage () {
      this.form.checkKey = new Date().getTime();
      this.$get(sys.randomImage + this.form.checkKey).then(res => {
        if (res.result) {
          this.randCodeImage = res.result;
          this.requestCodeSuccess=true;
        } else {
          this.$message.error(res.message);
          this.requestCodeSuccess=false;
        }
      }).catch(() => {
        this.requestCodeSuccess=false;
      })
    },

    // 提交
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }

        var param = {
          loginType: 3, // 1客户  2承运商 3运营商 4司机
          username: this.form.username,
          password: this.form.password,
          captcha: this.form.captcha,
          checkKey: this.form.checkKey
        }
        this.$post(sys.login, param).then(res => {
          var data = res.result;

          // token
          token.set(data.token);
          // 用户信息
          storage.set('userInfo', data.userInfo);
          // 部门信息
          storage.set('departInfo', data.departs);
          // 清除数据
          this.$store.commit('DELETE_TAB_PAGES', 'all');

          // 获取权限列表 - 并保存数据到缓存中
          this.$store.dispatch('GetPermissionList').then(menu => {
            // 添加菜单权限
            addLayoutRoutes(menu);
            // 跳转首页 - 权限列表中一定要有首页哈
            this.$router.push(this.$store.state.layout.homePath);
          })
        }).catch(() => {
          this.getCodeImage();
        })
      })
    },

    // 显示active状态
    showActive (type, name) {
      this.active[name] = type;
    },
  }
}
</script>
<style lang="scss" scoped>
.login-wp {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url(../../assets/image/bg.png) no-repeat center;
  background-size: cover;

  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -225px;
    margin-left: -375px;
    padding-top: 40px;
    padding-right: 315px;
    width: 750px;
    height: 450px;
    background: rgba(255,255,255,0.9) url(../../assets/image/001.png) no-repeat right center;
    background-size: 315px 100%;
    box-sizing: border-box;
    box-shadow: 0 0 12px 0 rgba(0,0,0,.1);


    .title {
      position: absolute;
      top: -120px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      font-size: 70px;
      font-weight: bold;
      font-family: Microsoft YaHei;
      color: #fff;
      line-height: 102px;
      img {
        margin-right: 30px;
        width: 102px;
        height: 102px;
      }
      span {
        letter-spacing: 3px;
        background-image:-webkit-linear-gradient(bottom,#fff,#E2ECFE); 
        -webkit-background-clip:text; 
        -webkit-text-fill-color:transparent; 
      }
    }

    .box {
      padding: 0 50px;

      .form-item {
        margin-bottom: 26px;
      }

      .t1 {
        position: relative;
        margin-bottom: 40px;
        padding-left: 20px;
        line-height: 40px;
        font-size: 28px;
        font-weight: bold;
        letter-spacing: 2px;
        color: #062A4C;
        font-family: Microsoft YaHei;
        &:before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          margin-top: -15px;
          width: 7px;
          height: 30px;
          background: #EBAB1B;
        }
      }

      .code-btn {
        .ipt-box {
          float: left;
          width: 182px;
          margin-right: 16px;
        }
        .img-box {
          float: left;
          width: 100px;
          height: 50px;
          img {
            display: block;
            height: 100%;
            width: 100%;
          }
        }
      }

      .submit-btn {
        width: 100%;
        height: 56px;
        box-shadow: 2px 3px 3px 0px rgba(0,0,0,.2);
      }
    }
      
  }

  .ipt-box {
    position: relative;
    &.active:before {
      width: 100%;
    }
    &:before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%);
      width: 0;
      height: 1px;
      background: rgba(30,87,142,0.8);
      box-shadow: 0 0 0.03rem #2196f3;
      transition: all .2s linear;
    }

    i {
      position: absolute;
      left: 11px;
      top: 50%;
      margin-top: -15px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 22px;
      color: #5181B2;
    }
    input {
      padding-left: 53px;
      width: 100%;
      height: 50px;
      border: none;
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;
      outline: medium;
      background: none;
      font-size: 15px;
    }
  }
}
</style>